.content {
  padding: 0;
  margin: 0 15px 15px;
  .content-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .picItem {
      width: 100%;
      overflow: hidden;
      height: 400px;
      // width: 100%;
      position: relative;
      text-align: center;
      a {
        img {
          overflow: hidden;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 400px;
          // width: 100%;
          // vertical-align: middle;
        }
        &:hover {
          .shadow {
            opacity: 0.5;
          }
        }
        .shadow {
          transition: all 1s;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          // background-color: rgba(0, 0, 0, 0.486);
        }
        .shade {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 112px;
          background-color: #000;
          opacity: 0.4;
        }
        .info {
          position: absolute;
          left: 0;
          bottom: 0;
          height: 52px;
          padding: 30px 20px;
          color: #fff;
          font-size: 14px;
          width: 50%;
          text-align: left;
          .top {
            span {
              display: inline-block;
              padding: 0 5px 5px 0;
            }
          }
        }
        .arrow {
          z-index: 19;
          position: absolute;
          right: 30px;
          bottom: 56px;
          transform: translateY(50%);
          height: 34px;
          width: 17px;
          background: url('../assets/arrow.png') no-repeat 0 0;
        }
      }
    }
  }
}

@media screen and (min-width: 730px) {
  .content {
    margin: 0 40px 40px;
  }
  .content-wrap {
    .picItem:nth-child(odd) {
      width: 60%;
      height: 400px;
    }
    .picItem:nth-child(even) {
      width: 40%;
      height: 400px;
    }
  }
  /* header和导航栏显示,logo变大 */
  div.home {
    .sm-topbar {
      display: none;
    }
    .header {
      display: block;
    }
    nav.navbar {
      display: block;
    }
  }
}

@media screen and (min-width: 991px) {
  .content {
    .content-wrap {
      .picItem {
        width: 50%;
      }
    }
  }
  /*   导航栏字变大 */
  .home {
    .navbar {
      .menu {
        li {
          a {
            font-size: 20px;
          }
        }
      }
    }
    // footer样式变更
    footer {
      div.top {
        div.left-content {
          overflow: unset;
        }
      }
    }
  }
}

@media screen and (min-width: 1280px) {
  .content {
    .content-wrap {
      .picItem {
        width: 20%;
      }
      .picItem:nth-child(4n + 0) {
        width: 40%;
      }
      .picItem:nth-child(1),
      .picItem:nth-child(2) {
        width: 40%;
      }
    }
  }
  .home {
    footer {
      div.top {
        div.left-content {
          .left,
          .right {
            padding: 0 40px 40px 0;
            font-size: 18px;
          }
          .left {
            font-size: 25px;
          }
        }
        div.right-content {
          float: right;
          font-size: 18px;
          .left,
          .right {
            padding: 0 40px 40px 0;
          }
        }
      }
    }
  }
}

@media screen and (min-width: 1440px) {
  .home {
    .content {
      .content-wrap {
        .picItem {
          width: 33.333333%;
        }
      }
    }
  }
}
